<template>
	<uni-nav-bar statusBar @clickLeft="back" @clickRight="toRecord" :shadow="false" :border="false" fixed
		left-icon="left" rightText="转账记录" title="我要转账" color="#ffffff" backgroundColor="#3c9cff" shadow />
	<view class="conversion-container full-container">
		<view class="main-content">
			<!-- <view class="title">
				额度转换
			</view> -->

			<view class="conversion-box">
				<view class="data-box">
					<view class="item">
						从 <text>我的信用账户</text>
					</view>
					<view class="item flex align-center">
						<view style="margin-right: 28rpx;">到</view>
						<uni-easyinput v-model="toAccount" placeholder="请输入转账的目标账号" type="digit" clearSize="20" :inputBorder="true" />
					</view>
				</view>
			</view>

			<view class="money-box">
				<view class="head">转账的金额</view>
				<view class="body flex align-center" style="height: 60px;">
					<uni-easyinput v-model="money" placeholder="请输入转账的金额" type="digit" clearSize="20" :inputBorder="false" />
					<view class="right flex align-center">
						<text>{{currencyUnit}}</text>
						<up-line direction="col" length="30rpx" color="#9acafc"></up-line>
						<view @click="money = balance">全部</view>
					</view>
				</view>
				<view class="foot">
					可用<text>{{ balance }}</text>{{currencyUnit}}，转换金额不能大于可用金额。
				</view>
			</view>
		</view>

		<view class="btn-group">
			<up-button @click="submit" color="linear-gradient(to right, rgb(0, 85, 255), rgb(0, 170, 255))" hairline
				shape="circle" text="立即转账"></up-button>
		</view>
	</view>
	
	<geek-code ref="code" v-model:code="code" @success="onConfirm"></geek-code>
</template>

<script>
	import _ from 'lodash'
	import { info,transfer } from '@/api/seller/account.js'
	
	export default {
    data() {
        return {
			accountId: '',
			toAccount: '',
            money: '',
			code: '',
			balance:0
        };
    },
	computed:{
		accountInfo() {
			return this.$store.state.user?.account || {}
		},
		
		myAccountId() {
			return this.accountInfo?.id || ''
		},
		appInfo() {
			return this.$store.state.user?.appInfo || {}
		},
		currencyUnit(){
			return this.appInfo.settleCurrencyUnit || ''
		},
	},
    methods: {
        submit() {
			const self = this
            if (!this.money || this.money<=0) {
                uni.showToast({
                    title: '请输入转账金额，且大于0',
                    icon: 'none',
                });
                return;
            }
			if (this.money > this.balance) {
			    uni.showToast({
			        title: '转账金额不能大于可用余额',
			        icon: 'none',
			    });
			    return;
			}
			self.$refs.code.open();
        },
		back() {
			this.$tab.navigateBack()
		},
		
		toRecord() {
			this.$tab.navigateTo('/pages_mine/pages/property/transferHis')
		},
		onConfirm(){
			const self = this
			if(!this.code){
				return false
			}
			var data = {
				"amount":self.money,
				"fromAccount": self.accountId,
				"toAccount":self.toAccount
			}
			// 提交转换
			transfer(data,self.code).then(res => {
				uni.showModal({
				  title: '系统提示',
				  content: '转账已成功！',
				  cancelText: '退出',
				  showCancel:false,
				  confirmText: '知道了',
				  success: function (res) {
				    if (res.confirm) {
						self.$tab.navigateBack()
				    }
				  }
				})
			})
		},
		initData() {
			// 获取账户信息
			info("CREDIT").then(res => {
			    // 处理账户信息
				this.balance = res.data.balance / 100;
			}).catch(err => {
			    // 处理错误
			});
		}
    },
    onLoad(options) {
		this.accountId = options?.id || this.myAccountId || ''
        this.initData();
    },
}
</script>

<style lang="scss" scoped>
	.conversion-container {
		display: flex;
		flex-direction: column;
		padding: 40rpx 50rpx;
		box-sizing: border-box;
		background-color: #fff;
		.main-content {
			.title {
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 30rpx;
			}

			.conversion-box {
				border: 1px solid rgba(#9acafc,0.3);
				display: flex;
				// align-items: center;
				.data-box {
					display: flex;
					flex-direction: column;
					flex:1;
					padding-left: 30rpx;
                    
					.item {
						padding: 20rpx;
						border-bottom: 1px solid rgba(#9acafc,0.3);
                        
                        &:last-child {
                            border-bottom: none;
                        }
                        
                        text {
                            color: #0055ff;
                            margin-left: 20rpx;
                        }
                    }
				}

				.btn {
					width: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
                    border-left: 1px solid rgba(#9acafc,0.3);
					background-color: #ecf5ff;
				}
			}

			.money-box {
				margin-top: 30rpx;
				.head {
					font-size: 30rpx;
					font-weight: 500;
				}

				.body {
					margin-top: 10rpx;
					border-bottom: #9acafc 1px solid ;
					
					&::v-deep{
						.uni-easyinput__content-input{
							padding-left: 0 !important;
							
						}
						
						.uni-input-placeholder{
							font-size: 28rpx;
							color:#999;
						}
						
						.uni-input-input{
							font-size: 28rpx;
							color:#333;
						}
					}
					.right {
						margin-left: 20rpx;
                        color: #999;
                        font-size: 26rpx;
                        display: flex;
                        align-items: center;
						
						view{
							color:#2979ff;
                            font-weight: bold;
							cursor: pointer;
							font-size: 28rpx;
						}
						
						&::v-deep{
							.u-line{
								margin: 0 20rpx !important;
							}
						}
					}
				}

				.foot {
					color:#666;
					font-size: 26rpx;
					margin-top: 24rpx;
					text{
						color:#2979ff;
						margin: 0 10rpx;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
		}

		.btn-group {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
            justify-content: flex-end;
			padding-bottom: 60rpx;
		}	
	}
</style>